<template>
  <div class="china-chart" ref="chinaChartRef"></div>
</template>

<script lang="ts">
export default {
  name: "ChinaChart",
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import china from "./china.json";

// 注册地图
echarts.registerMap("china", china as any);

/*
  https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner#tab0

  const list = document.querySelectorAll('.VirusTable_1-85-1_3m6Ybq');
  const arr = []
  for (let i = 0; i < list.length; i++) {
      const item = list[i];
      const name = item.children[0].innerText;
      const value = item.children[1].innerText;
      arr.push({
        name,
        value
      })
  }
  JSON.stringify(arr)
*/

// 新增确诊数据
const data = [
  { name: "台湾", value: "34580" },
  { name: "香港", value: "1497" },
  { name: "四川", value: "134" },
  { name: "广东", value: "53" },
  { name: "西藏", value: "53" },
  { name: "海南", value: "24" },
  { name: "内蒙古", value: "14" },
  { name: "天津", value: "12" },
  { name: "福建", value: "10" },
  { name: "黑龙江", value: "10" },
  { name: "辽宁", value: "9" },
  { name: "青海", value: "9" },
  { name: "重庆", value: "8" },
  { name: "上海", value: "7" },
  { name: "陕西", value: "5" },
  { name: "山东", value: "5" },
  { name: "新疆", value: "5" },
  { name: "北京", value: "4" },
  { name: "云南", value: "4" },
  { name: "江苏", value: "2" },
  { name: "湖北", value: "1" },
  { name: "吉林", value: "1" },
  { name: "河南", value: "1" },
  { name: "江西", value: "1" },
  { name: "甘肃", value: "1" },
  { name: "浙江", value: "0" },
  { name: "广西", value: "0" },
  { name: "河北", value: "0" },
  { name: "安徽", value: "0" },
  { name: "湖南", value: "0" },
  { name: "澳门", value: "0" },
  { name: "山西", value: "0" },
  { name: "贵州", value: "0" },
  { name: "宁夏", value: "0" },
];

const chinaChartRef = ref();
onMounted(() => {
  const myEchart = echarts.init(chinaChartRef.value);
  const option = {
    title: {
      text: "新冠疫情新增确诊数据",
      left: "center",
      top: 20,
    },
    series: {
      name: "新冠疫情新增确诊数据",
      type: "map",
      map: "china",
      label: {
        show: true,
      },
      data,
    },
    tooltip: {},
    visualMap: {
      type: "piecewise",
      pieces: [
        { min: 1001, color: "#b80909" },
        { min: 101, max: 1000, color: "#f57567" }, // 高风险
        { min: 11, max: 100, color: "#ff9985" }, // 中风险
        { min: 1, max: 10, color: "#ffe5db" }, // 低风险
        { min: 0, max: 0, color: "#fff" }, // 0风险
      ],
    },
  };
  myEchart.setOption(option);
});
</script>

<style scoped>
.china-chart {
  height: 600px;
}
</style>
